<template>
  <div class="echarts-outer-wrapper">
    <Title title="税款/案件数统计"></Title>
    <div class="echart-wrapper">
      <div class="echart-tab-wrapper">
        <div class="tabs">
          <div
            class="tab-item"
            :class="{ select: select === 0 }"
            @click="changeSelect(0)"
          >
            按查补税额
          </div>
          <div
            class="tab-item"
            :class="{ select: select === 1 }"
            @click="changeSelect(1)"
          >
            按案件数
          </div>
        </div>
      </div>
      <MapBox
        class="echart"
        v-model="chartID"
        v-if="chartID"
        :mapConfig="mapConfig"
      ></MapBox>
      <!-- <div ref="echart" class="echart"></div> -->
      <div class="new-add-area" v-if="select === 0">
        <div class="tooltip-box" v-if="newAddArea && newAddArea[0]">
          <div class="title">{{ newAddArea[0].zgswjgjc }}</div>
          <div class="item">
            <span>税款</span>
            <span class="money">{{ newAddArea[0].skje }}万元</span>
          </div>
          <div class="item">
            <span>滞纳金</span>
            <span class="money">{{ newAddArea[0].znjje }}万元</span>
          </div>
          <div class="item">
            <span>罚款</span>
            <span class="money">{{ newAddArea[0].fkje }}万元</span>
          </div>
          <div class="all">
            <span>总额</span>
            <span class="money">{{ newAddArea[0].zje }}万元</span>
          </div>
        </div>
        <div class="tooltip-box" v-if="newAddArea && newAddArea[1]">
          <div class="title">{{ newAddArea[1].zgswjgjc }}</div>
          <div class="item">
            <span>税款</span>
            <span class="money">{{ newAddArea[1].skje }}万元</span>
          </div>
          <div class="item">
            <span>滞纳金</span>
            <span class="money">{{ newAddArea[1].znjje }}万元</span>
          </div>
          <div class="item">
            <span>罚款</span>
            <span class="money">{{ newAddArea[1].fkje }}万元</span>
          </div>
          <div class="all">
            <span>总额</span>
            <span class="money">{{ newAddArea[1].zje }}万元</span>
          </div>
        </div>
      </div>
      <div class="new-add-area" v-if="select === 1">
        <div class="tooltip-box" v-if="newAddArea && newAddArea[0]">
          <div class="title">{{ newAddArea[0].zgswjgjc }}</div>
          <div class="item">
            <span>检查数量</span>
            <span class="money">{{ newAddArea[0].jcsl }}件</span>
          </div>
          <div class="item">
            <span>审理数量</span>
            <span class="money">{{ newAddArea[0].slsl }}件</span>
          </div>
          <div class="item">
            <span>执行数量</span>
            <span class="money">{{ newAddArea[0].zxsl }}件</span>
          </div>
          <div class="item">
            <span>结案数量</span>
            <span class="money">{{ newAddArea[0].jasl }}件</span>
          </div>
          <div class="all">
            <span>总数量</span>
            <span class="money">{{ newAddArea[0].zsl }}件</span>
          </div>
        </div>
        <div class="tooltip-box" v-if="newAddArea && newAddArea[1]">
          <div class="title">{{ newAddArea[1].zgswjgjc }}</div>
          <div class="item">
            <span>检查数量</span>
            <span class="money">{{ newAddArea[1].jcsl }}件</span>
          </div>
          <div class="item">
            <span>审理数量</span>
            <span class="money">{{ newAddArea[1].slsl }}件</span>
          </div>
          <div class="item">
            <span>执行数量</span>
            <span class="money">{{ newAddArea[1].zxsl }}件</span>
          </div>
          <div class="item">
            <span>结案数量</span>
            <span class="money">{{ newAddArea[1].jasl }}件</span>
          </div>
          <div class="all">
            <span>总数量</span>
            <span class="money">{{ newAddArea[1].zsl }}件</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
import MapBox from "@/components/map";
export default {
  name: "skajstj",
  components: {
    Title,
    MapBox,
  },
  data() {
    return {
      prevDate: null,
      EchartData: { cbseList: [], ajsList: [] },
      newAddArea: null,
      select: 0,
      mapConfig: {},
      chartID: "11100000000",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  computed: {},
  mounted() {
    this.ajax({
      url: "/dpzsJccxService/skajstjQuery",
      method: "post",
      data: {
        param: {
          tjny: this.prevDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      // console.log(this.mapConfig);
      this.mapConfig = this.initEchart();
    });
  },
  methods: {
    changeSelect(index) {
      this.select = index;
      this.mapConfig = this.initEchart();
    },
    initEchart() {
      let allObj = null;
      let allArr = null;
      let max = null;
      let min = null;
      let yanshan = null;
      let jingkai = null;
      if (this.select == 0) {
        let currentData = this.EchartData.cbseList;
        yanshan = currentData.filter((item) => {
          return item.zgswjgbm == "11101910000";
        });
        jingkai = currentData.filter((item) => {
          return item.zgswjgbm == "11101920000";
        });
        allObj = currentData.map((item) => {
          return {
            name: item.zgswjgbm,
            value: item.zje,
            ...item,
          };
        });
        allArr = currentData.map((item) => {
          return item.zje;
        });
      } else if (this.select == 1) {
        let currentData = this.EchartData.ajsList;
        yanshan = currentData.filter((item) => {
          return item.zgswjgbm == "11101910000";
        });
        jingkai = currentData.filter((item) => {
          return item.zgswjgbm == "11101920000";
        });
        allObj = currentData.map((item) => {
          return {
            name: item.zgswjgbm,
            value: item.zsl,
            ...item,
          };
        });
        allArr = currentData.map((item) => {
          return item.zsl;
        });
      }
      this.newAddArea = [yanshan[0], jingkai[0]];
      min = Math.min(...allArr);
      max = Math.max(...allArr);
      function randomData() {
        return Math.round(Math.random() * 10000);
      }
      let option = {
        visualMap: {
          min: min,
          max: max,
          left: 0,
          top: "60",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          textStyle: {
            color: "#ffffff",
          },
          //不同的地图模块，指定展示不同的颜色
          inRange: {
            color: ["#538cff", "#155ff4"],
          },
        },
        geo: [
          {
            map: this.chartID,
            zlevel: -1,
            aspectScale: 0.8,
            layoutCenter: ["46%", "44%"],
            layoutSize: "90%",
            itemStyle: {
              normal: {
                areaColor: "#ffffff",
                borderColor: "#ffffff",
                borderWidth: 5,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -2,
            aspectScale: 0.8,
            layoutCenter: ["46%", "45%"],
            layoutSize: "90%",
            itemStyle: {
              normal: {
                areaColor: "#0b2152",
                borderColor: "#0b2152",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -3,
            aspectScale: 0.8,
            layoutCenter: ["46%", "45.3%"],
            layoutSize: "90%",
            itemStyle: {
              normal: {
                areaColor: "#0a35a0",
                borderColor: "#0a35a0",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -4,
            aspectScale: 0.8,
            layoutCenter: ["46%", "46.5%"],
            layoutSize: "90%",
            itemStyle: {
              normal: {
                areaColor: "#0b2152",
                borderColor: "#0b2152",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -5,
            aspectScale: 0.8,
            layoutCenter: ["46%", "46.8%"],
            layoutSize: "90%",
            itemStyle: {
              normal: {
                areaColor: "#0a35a0",
                borderColor: "#0a35a0",
                borderWidth: 8,
              },
            },
          },
          {
            map: this.chartID,
            zlevel: -6,
            aspectScale: 0.8,
            layoutCenter: ["46%", "47.3%"],
            layoutSize: "90%",
            itemStyle: {
              normal: {
                areaColor: "#0b2152",
                borderColor: "#0b2152",
                borderWidth: 8,
              },
            },
          },
        ],
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0)",
          formatter: (item) => {
            if (!item.data || !item.data.zgswjgmc) {
              return "";
            }
            if (this.select == 0) {
              return (
                `<div class="tooltip-box">` +
                `<div class="title">${item.data.zgswjgjc}</div>` +
                `<div class="item"><span>税款</span><span class="money">${item.data.skje}万元</span></div>` +
                `<div class="item"><span>滞纳金</span><span class="money">${item.data.znjje}万元</span></div>` +
                `<div class="item"><span>罚款</span><span class="money">${item.data.fkje}万元</span></div>` +
                `<div class="all"><span>总额</span><span class="money">${item.data.zje}万元</span></div>` +
                `</div>`
              );
            } else {
              return (
                `<div class="tooltip-box">` +
                `<div class="title">${item.data.zgswjgjc}</div>` +
                `<div class="item"><span>检查数量</span><span class="money">${item.data.jcsl}件</span></div>` +
                `<div class="item"><span>审理数量</span><span class="money">${item.data.slsl}件</span></div>` +
                `<div class="item"><span>执行数量</span><span class="money">${item.data.zxsl}件</span></div>` +
                `<div class="item"><span>结案数量</span><span class="money">${item.data.jasl}件</span></div>` +
                `<div class="all"><span>总数量</span><span class="money">${item.data.zsl}件</span></div>` +
                `</div>`
              );
            }
          },
        },
        series: [
          {
            type: "map",
            mapType: this.chartID,
            aspectScale: 0.8,
            layoutCenter: ["46%", "44%"], //地图位置
            layoutSize: "90%",
            zoom: 1, //当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            label: {
              show: true,
              color: "#FFFFFF",
              fontSize: 14,
              formatter: (item) => {
                return item.data.zgswjgmc;
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#2762e4",
                borderColor: "#2762e4",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#083a9d", // 鼠标悬浮颜色
                label: {
                  show: false,
                  color: "#fff",
                },
              },
            },
            data: allObj,
          },
        ],
      };
      return { option };
    },
  },
};
</script>
<style>
.tooltip-box {
  padding: 0;
  box-sizing: border-box;
  width: 240px;
  background-size: cover;
  background-position: top center;
  background-image: url("~@/assets/images/bg-tooltip.png");
  background-color: #2d8cf0;
}

.tooltip-box .title {
  padding: 0 10px;
  height: 44px;
  line-height: 44px;
  font-size: 20px;
  color: #ffffff;
}

.tooltip-box .item {
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  color: #ffffff;
  font-size: 16px;
}

.tooltip-box .money {
  color: #fbe671;
}

.tooltip-box .all {
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  color: #fbe671;
  font-size: 20px;
}
</style>
<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 770px;
  height: 638px;
}
.echart-tab-wrapper {
  position: absolute;
  z-index: 99;
}
.echart-wrapper {
  position: relative;
  height: 576px;
  background-image: url(~@/assets/images/map-foot.png);
  background-size: 600px 140px;
  background-repeat: no-repeat;
  background-position: center bottom;
  .echart {
    height: 100%;
  }
}
.new-add-area {
  position: absolute;
  right: 0;
  bottom: 20px;
  .tooltip-box {
    width: 180px;
    margin-bottom: 20px;
    background-image: url("~@/assets/images/bg-tooltip-2.png");
    background-size: 100% 100%;
    background-color: #2d8cf0;
    .title {
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      border-bottom: 1px solid #0ac9fc;
    }
    .item {
      height: 24px;
      line-height: 24px;
      font-size: 12px;
    }
    .all {
      height: 26px;
      line-height: 26px;
      font-size: 12px;
    }
  }
}
</style>
